<template>
  <div class="stutable">
    <!-- 搜索框 -->
    <div class="search">
      <!-- clearable	是否可以清空选项 -->
      <el-select v-model="value"
                 filterable
                 remote
                 clearable
                 @clear='clear'
                 :remote-method="remoteMethod"
                 @visible-change='searchvisible'
                 @change='textchange'
                 @blur='losefocus'
                 placeholder="请输入姓名">
        <el-option v-for="item in options"
                   :key="item._id"
                   :label="item.name"
                   :value="item.name">
        </el-option>
      </el-select>
      <!-- 搜索按钮 -->
      <el-button icon="el-icon-search"
                 @click="find"
                 type="primary"></el-button>
      <!-- 添加按钮 -->
      <el-button type="primary"
                 @click="add"
                 v-has="'add'"
                 plain>添加项目</el-button>
    </div>
    <!--班级选择 -->
    <div class="selectclass">
      <el-form>
        <el-form-item label="选择班级:">
          <el-select v-model="classes"
                     filterable
                     clearable
                     current-page='currentpage'
                     @change="classchange"
                     @visible-change='classvisible'
                     placeholder="请选择">
            <el-option label="全部"
                       v-loading="selectloading"
                       value=""></el-option>
            <el-option v-for="(item,index) in classlist"
                       :key="index"
                       :label="item"
                       :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="excel">
        <el-button type="primary"
                   @click="exportexcel">导出excel</el-button>
      </div>
    </div>
    <el-table :data="studata"
              v-loading="loading"
              border
              style="width: 100%">
      <el-table-column prop="headimgurl"
                       label="头像"
                       align='center'
                       width="180">
        <!-- 插槽作用域 -->
        <!-- 可以获取父组件el-table-column上的绑定的数据 -->
        <template v-slot="headimg">
          <el-avatar shape="square"
                     :size="50"
                     fit="fill"
                     :src="headimg.row.headimgurl"></el-avatar>
          <!--  {{headimg.row}} -->
        </template>
      </el-table-column>
      <el-table-column prop="name"
                       label="姓名"
                       align='center'
                       width="180">
      </el-table-column>
      <el-table-column prop="class"
                       align='center'
                       label="班级">
      </el-table-column>
      <el-table-column prop="productUrl"
                       align='center'
                       label="项目">
      </el-table-column>
      <el-table-column prop="cTime"
                       align='center'
                       label="添加时间">
      </el-table-column>
      <el-table-column prop="description"
                       align='center'
                       label="描述">
      </el-table-column>

      <el-table-column prop="address"
                       align='center'
                       label="操作">
        <!-- 插槽作用域 -->
        <template v-slot="scoped">
          <el-button type="primary"
                     @click="look(scoped)"
                     v-has="'read'"
                     icon="el-icon-view">查看
          </el-button>

          <el-button type="primary"
                     @click="edit(scoped)"
                     v-has="'edit'"
                     icon="el-icon-edit">编辑
          </el-button>

          <el-button type="danger"
                     @click="del(scoped)"
                     v-has="'delete'"
                     icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <div class="pagination">

      <el-pagination background
                     layout="prev, pager, next"
                     @current-change='pagechange'
                     :page-size="pagesize"
                     :total="pagetotal">
      </el-pagination>
    </div>
    <!-- dialog弹出框 -->
    <dailog></dailog>
  </div>
</template>

<script>
  //将数据导出成为excel文件
  import qee from "qf-export-excel"
  import { getstudata, deletestuinfo, getclasslist, searchstu } from '../../../../api'
  import dailog from '../../../../components/Dialog'
  import { mapState, mapActions, mapMutations } from 'vuex'
  export default {
    data() {
      return {
        //搜索框
        options: [],
        //选择班级绑定的数据
        classes: '',
        //搜索框数据
        value: '',
        //班级列表
        classlist: [],
        //select加载动画
        selectloading: true,
        //当前页数
        currentpage: 1
      }
    },
    components: {
      dailog
    },
    created() {
      this.GET_STUDATA()
    },
    methods: {
      ...mapActions(['GET_STUDATA']),
      ...mapMutations(['SHOW_DIALOGVISIBLE', 'HIDE_DIALOGVISIBLE'
        , 'CHANGE_DAILOGTITLE', 'SET_BACKDATA', 'SET_STUDATA']),
      //添加项目按钮
      add() {
        //弹出dialog
        this.SHOW_DIALOGVISIBLE()
        //修改dialog标题
        this.CHANGE_DAILOGTITLE('添加学员信息')
      },
      //放大镜搜索按钮
      find() {
        console.log(this.value);
        searchstu(this.value).then(res => {
          console.log(res);
          if (res.data.state) {
            this.options = res.data.data
          }
        })
      },
      //表格查看按钮
      look(row) {
        this.SET_BACKDATA(row.row)
        this.$router.push({path: '/studentManager/profill'})
      },
      //表格编辑按钮
      edit(scoped) {
        this.SHOW_DIALOGVISIBLE()
        this.CHANGE_DAILOGTITLE('编辑学员信息')
        //console.log(scoped);scoped存着这一行的所有数据信息
        //把这一行的数据传递给dialog组件实现回显
        this.SET_BACKDATA(scoped.row)
      },
      //表格删除按钮
      del(scoped) {

        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //请求删除学员信息api
          deletestuinfo(scoped.row.sId).then(res => {
            if (res.data.state) {
              //删除成功后更新表格
              this.GET_STUDATA()
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            } else {
              this.$message.error('数据不存在')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消删除'
          });
        });
      },
      //班级选择中的事件
      classchange(query) {
        console.log(query);
        //1.select下拉框展开的时候需要展示所有班级列表

        //2.选中班级列表时，更新表格
        this.GET_STUDATA({ classes: query })
      },
      //班级选择框展开/收起触发事件
      classvisible(isvisible) {
        if (isvisible) {
          this.selectloading = true
          //下拉框出现了，发送请求获取班级列表
          getclasslist().then(res => {
            console.log(res);
            if (res.data.state) {
              this.classlist = res.data.data;
              this.selectloading = false
            }

          })
        }
      },
      //分页页码变更时
      pagechange(page) {
        if (this.value) {
          //判断搜索框是否有值，有则返回搜索结果的分页
          searchstu(this.value, 10, page).then((res) => {
            this.SET_STUDATA(res.data)
          })
        } else {
          //页码变更传给后台重新获取数据
          this.GET_STUDATA({ pages: page })
        }

      },
      //输入值发生变化时调用，参数为当前输入值
      remoteMethod(val) {
        //让按钮获取到输入的值
        this.value = val
        //输入值变化请求搜索api然后更改表格数据
        searchstu(this.value).then(res => {
          //数组去重
          let norepeat = [];
          // let flag = true;
          for (let i = 0; i < res.data.data.length; i++) {
            let flag = true;
            for (let k = 0; k < norepeat.length; k++) {
              if (norepeat[k].name === res.data.data[i].name) {
                flag = false;
                break;
              }
            }
            if (flag) {
              norepeat.push(res.data.data[i]);
            }
          }
          this.options = norepeat
          this.SET_STUDATA(res.data)
        })
      },
      //当搜索框传入的是el-options中绑定的value的值(按下options触发事件)
      textchange(txt) {
        searchstu(txt).then(res => {
          this.currentpage = 1//搜索完以后显示第一页
          this.SET_STUDATA(res.data)

        })
      },
      //搜索框下拉时
      searchvisible(val) {
        if (val) {
          this.val = ''
          searchstu("", "", 1).then(res => {
            //console.log(res.data.data);
            this.options = res.data.data
          })
        }
      },
      //搜索框失去焦点
      losefocus() {
        console.log("失去了focus");
      },
      //搜索框值删除时
      clear() {
        this.currentpage = 1
      },
      //导出exportexcel
      exportexcel() {
        let titletable = [
          {
            title: "头像地址",
            key: 'headimgurl'
          }, {
            title: "姓名",
            key: 'name'
          }, {
            title: "城市",
            key: 'city'
          }, {
            title: "班级",
            key: 'class'
          }, {
            title: "学历",
            key: 'degree'
          }, {
            title: "项目地址",
            key: 'productUrl'
          }, {
            title: "描述",
            key: 'description'
          },
        ]
        qee(titletable, this.studata, '2108班级信息')
        console.log(this.studata);
      }
    },
    computed: {
      ...mapState(['loading', 'studata', 'pagetotal', 'pagesize']),

    }
  }


</script>

<style lang='scss' scoped>
  .search {
  	margin-bottom: 15px;
  	text-align: left;
  }
  .el-select {
  	float: left;
  }
  //修改按钮样式
  .el-table {
  	.el-button {
  		width: 65px;
  		height: 25px;
  		padding: 0;
  	}
  }
  .selectclass {
  	.el-form {
  		float: left;
  	}
  }
  .excel {
  	margin-right: 15px;
  	float: right;
  	margin-top: 48px;
  }
</style>
